<template>
  <div id="system_memory" ref="system_memory" :class="[boxWidth,boxHeight]"></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  name: 'systemMemory',
  props: {
    boxWidth: {
      type: String
    },
    boxHeight: {
      type: String
    },
    boxTitle: {
      type: String
    },
    boxText1: {
      type: String
    },
    boxText2: {
      type: String
    },
    boxText1Font: {
      type: String
    },
    boxText2Font: {
      type: String
    },
    boxValue: { // 水波纹占比 范围0-1
      type: Number,
      default: 0.5
    },
    borderDistance: { // 外环边框之间的距离
      type: Number,
      default: 10
    }
  },
  data () {
    return {

    }
  },
  mounted () {
    const system_memory = echarts.init(this.$refs.system_memory)
    const value = this.boxValue
    const data = [value, value] // 水波纹的数量:两个value代表2条
    const system_memory_option = {
      title: {
        show: true,
        text: this.boxTitle,
        x: 'center',
        y: 'bottom',
        textStyle: {
          fontSize: '18',
          color: '#333'
          // fontWeight:"bold",
        }
      },
      graphic: [{
        type: 'group',
        left: 'center',
        top: '65%',
        children: [{
          type: 'text',
          z: 100,
          left: 'center',
          top: 'bottom',
          style: {
            fill: '#fff',
            textShadowColor: 'black', // 文字阴影
            textShadowBlur: 5,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            text: this.boxText1,
            font: this.boxText1Font, // 18px Microsoft YaHei
            textAlign: 'center' // 居中文字
          }
        }, {
          type: 'text',
          z: 100,
          left: 'center',
          style: {
            fill: '#fff', // 文字颜色
            textShadowColor: 'black', // 文字阴影
            textShadowBlur: 5,
            textShadowOffsetX: 0,
            textShadowOffsetY: 0,
            text: this.boxText2,
            font: this.boxText2Font, // 18px Microsoft YaHei
            textAlign: 'center' // 居中文字
          }
        }]
      }],
      series: [{
        type: 'liquidFill',
        radius: '80%',
        center: ['50%', '50%'],
        color: ['#dbe7ff', '#2f89ee'], // 指定两条波纹的颜色
        //  shape: 'roundRect',
        data: data,
        backgroundStyle: {
          // borderWidth: 1,
          color: '#fff'
        },
        outline: {
          borderDistance: this.borderDistance,
          itemStyle: {
            borderWidth: 3,
            borderColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(107,140,250,1)'
              }, {
                offset: 1,
                color: 'rgba(57,186,242,1)'
              }],
              globalCoord: false
            }
            // shadowBlur: 0
          }
        },
        // itemStyle:{
        //   color: {
        //     type: 'linear',
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [{
        //       offset: 1,
        //       color: 'rgba(219,231,255, 1)'
        //     }, {
        //       offset: 0,
        //       color: 'rgba(75,135,252, 1)'
        //     }],
        //     globalCoord: false
        //   },
        // },
        label: {
          normal: {
            formatter: ''
          }
        }
      }]
    }
    system_memory.setOption(system_memory_option)
  }
}
</script>

<style scoped>

</style>
